<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日销售额" value="30,346,799">
        <div>
          <div class="today-sales">
            日同比 -19.16%
            <el-icon class="today-sales-icon" size="small" color="red"
              ><CaretBottom
            /></el-icon>
          </div>
          <div class="today-sales">
            周同比 65.67%
            <el-icon class="today-sales-icon" size="small" color="green"
              ><CaretTop
            /></el-icon>
          </div>
        </div>

        <template #footer> <div>昨日销售额 ￥360,000,000</div> </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日订单" value="25,425,458">
        <LineChart />

        <template #footer> <div>昨日订单量 330,111,000</div> </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日交易用户数" value="182,456">
        <BarChart />
        <template #footer>
          <div>退货率5.91%</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="累计用户数" value="17,182,458">
        <ProgressChart />

        <template #footer>
          <div class="user-wrap">
            <div class="today-sales">
              日同比 -19.16%
              <el-icon class="today-sales-icon" size="small" color="red"
                ><CaretBottom
              /></el-icon>
            </div>
            <div class="today-sales">
              周同比 65.67%
              <el-icon class="today-sales-icon" size="small" color="green"
                ><CaretTop
              /></el-icon>
            </div>
          </div>
        </template>
      </CommonCard>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: "HomeTop",
};
</script>

<script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import LineChart from "./LineChart.vue";
import BarChart from "./BarChart.vue";
import ProgressChart from "./ProgressChart.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
</script>

<style scoped>
.today-sales {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 5px 0;
}
.today-sales-icon {
  margin-left: 5px;
}

.user-wrap {
  display: flex;
}

.user-wrap .today-sales {
  font-size: 12px;
  margin: 0;
}
</style>
